<template>
    <div>
        <el-container>
            <!-- 菜品类别 -->
            <el-aside width="200px">
                <el-table :data="foodData" stripe style="width: 100%">
                    <el-table-column prop="category" label="菜品类别" width="180"></el-table-column>
                </el-table>
            </el-aside>
            <!-- 菜品列表 -->
            <el-main>
                <!-- 表格 -->
                <el-table ref="multipleTable":data="tableData" tooltip-effect="dark" 
                style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="id" label="ID" width="180" align='center'></el-table-column>
                    <el-table-column prop="foodId" label="菜品编号" width="180" align='center'></el-table-column>
                    <el-table-column prop="foodName" label="菜品名称" width="180" align='center'></el-table-column>
                    <el-table-column prop="price" label="售价" width="180" align='center'></el-table-column>
                    <el-table-column prop="num" label="剩余数量" width="180" align='center'></el-table-column>
                    <el-table-column prop="type" label="状态" width="180" align='center'></el-table-column>
                </el-table>
                <!-- 页码 -->
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" 
                :page-sizes="[5,10,15,20,25,30]" :page-size="5" layout="total,sizes,prev, pager, next, jumper" :total="400">
                </el-pagination>
            </el-main>
        </el-container>
    </div>
</template>
<style scoped lang='less'>
    .clear::after{
        content: '';
        display: block;
        clear: both;
    }
    .el-header{
        background: #F2F2F2;
        height: 50px !important;
        line-height: 50px !important;
        #btn{
            float: right;
        }
        // .el-button{
        //     height: 20px;
        //     line-height: 20px;
        // }
    }
    .el-pagination{
        text-align: center;
    }
</style>
<script>
export default {
    data(){
        return{
            // 菜品类别数据
            foodData:[
                {
                    category:'炒菜'
                },
                {
                    category:'蒸菜'
                },
                {
                    category:'凉菜'
                }
            ],
            // 菜品数据
            tableData:[
                {
                    id:'10',
                    foodId:'12345678',
                    foodName:'农家小炒肉',
                    price:'57.00',
                    num:'100',
                    type:'停售'
                },
                {
                    id:'9',
                    foodId:'12345678',
                    foodName:'农家小炒肉',
                    price:'57.00',
                    num:'100',
                    type:'正常'
                },
                {
                    id:'10',
                    foodId:'12345678',
                    foodName:'农家小炒肉',
                    price:'57.00',
                    num:'100',
                    type:'停售'
                },
                {
                    id:'8',
                    foodId:'12345678',
                    foodName:'农家小炒肉',
                    price:'57.00',
                    num:'100',
                    type:'停售'
                },
                {
                    id:'7',
                    foodId:'12345678',
                    foodName:'农家小炒肉',
                    price:'57.00',
                    num:'100',
                    type:'停售'
                },
                {
                    id:'6',
                    foodId:'12345678',
                    foodName:'农家小炒肉',
                    price:'57.00',
                    num:'100',
                    type:'停售'
                },
                {
                    id:'5',
                    foodId:'12345678',
                    foodName:'农家小炒肉',
                    price:'57.00',
                    num:'100',
                    type:'停售'
                },
            ]
        }
    },
    methods: {
        // 批量选择
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 添加
        onAdd(){

        },
        // 删除
        onDel(){

        },
        // 编辑
        onChange(){

        },
        // 下载二维码
        onUnload(){

        },
        // 每页多少条数据
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        // 当前页
        handleCurrentChange(val) {
           console.log(`当前页: ${val}`);
        }
    }
}
</script>